<template>
  <view class="item" @click="handleOpenPopup">
    <view class="content">
      <view class="img">
        <TImage
          v-if="item.applyType === ApplyTypeEnum.UNIT"
          :src="item.logo"
          width="200rpx"
          height="240rpx"
          background-color="#fff"
          error-img-type="unit"
        />
        <TImage
          v-else
          :src="item.leaderAvatar"
          width="200rpx"
          height="240rpx"
          background-color="#fff"
          error-img-type="person"
        />
        <view class="tag">{{ getApplyType }}</view>
      </view>
      <view class="info">
        <view class="_title disFlx">
          <view style="flex: 1">
            <text class="-name" style="margin-right: 28rpx">{{ item.leaderName }}</text>
            <text v-if="item.leaderSocialPosition" class="-post">
              {{ item.leaderSocialPosition }}
            </text>
          </view>
          <image
            v-if="item.leaderPhone"
            class="phone"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-1.png"
            alt=""
            @click.stop="handleCallPhone"
          />
        </view>
        <view class="_company">{{ item.companyName }}</view>
        <view class="_post">
          <text class="-name">{{ item.levelName }}</text>
        </view>
        <view class="_time" style="margin-top: 35rpx">
          <text class="-k">入会时间</text>
          <text class="-v">{{ item.joinTime }}</text>
        </view>
        <view class="_time _endTime">
          <view>
            <text class="-k">到期时间</text>
            <text class="-v">{{ item.memberEndTime }}</text>
          </view>
          <view
            v-if="
              item.paymentStatus === PaymentStatusEnum.DUE ||
              item.paymentStatus === PaymentStatusEnum.ARREARAGE ||
              item.paymentStatus === PaymentStatusEnum.NOTPAYCOST
            "
            class="-tag"
            :style="getPaymentStatusTagStyle"
          >
            {{ getPaymentStatus }}
          </view>
        </view>
      </view>
      <image
        v-if="item.memberState === 0"
        class="refund"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-7.png"
        alt=""
      />
    </view>
    <view class="bottom">
      <view class="_progress">
        <text>资料完善度 {{ item.dataIntegrity || 0 }}%</text>
        <image
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-2.png"
          alt=""
        />
      </view>
      <view class="_set">
        <text>设置</text>
        <image
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-2.png"
          alt=""
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  /** 会员管理Item */
  import { type PropType, computed, type CSSProperties } from 'vue';
  import type { IMemberManageListResData } from '@/api/admin/types';
  import { ApplyTypeEnum, PaymentStatusEnum } from '@/enums/membershipEnum';
  import TImage from '@/components/TImage/index.vue';

  const props = defineProps({
    item: {
      type: Object as PropType<IMemberManageListResData>,
      required: true,
    },
  });

  const emit = defineEmits(['openSetPopup']);

  const getApplyType = computed(() => {
    if (props.item.applyType === ApplyTypeEnum.UNIT) return '单位';
    else if (props.item.applyType === ApplyTypeEnum.PERSON) return '个人';
    else return '未知';
  });

  const getPaymentStatus = computed(() => {
    if (props.item.paymentStatus === PaymentStatusEnum.DUE) return '即将到期';
    else if (props.item.paymentStatus === PaymentStatusEnum.ARREARAGE) return '欠费';
    else if (props.item.paymentStatus === PaymentStatusEnum.NOTPAYCOST) return '待缴费';
    else return '';
  });

  const getPaymentStatusTagStyle = computed((): CSSProperties => {
    if (props.item.paymentStatus === PaymentStatusEnum.DUE)
      return {
        backgroundColor: '#D0F7FF',
        color: '#2878FF',
      };
    else if (props.item.paymentStatus === PaymentStatusEnum.ARREARAGE)
      return {
        backgroundColor: '#EA5E0E',
        color: '#fff',
      };
    else if (props.item.paymentStatus === PaymentStatusEnum.NOTPAYCOST)
      return {
        background: 'linear-gradient(90deg, #FDEDC7 0%, #F7D9A2 100%)',
        color: '#EA5E0E',
      };
    else return {};
  });

  const handleCallPhone = () => {
    uni.makePhoneCall({
      phoneNumber: props.item.leaderPhone,
    });
  };

  const handleOpenPopup = () => {
    emit('openSetPopup');
  };

  const toDetails = () => {
    // navigateTo({ name: 'memberUnitsDetails', options: { id: props.item.memberId, isEdit: false }});
  };
</script>

<style lang="scss" scoped>
  .item {
    padding: 25rpx 30rpx;
    background: #fff;
    margin-bottom: 30rpx;

    .content {
      position: relative;
      display: flex;
      padding-bottom: 24rpx;
      border-bottom: 1rpx #dddddd solid;

      .img {
        position: relative;

        ::v-deep {
          image {
            border-radius: 10rpx;
            // border-radius: 10rpx 0 0 0;
          }
        }

        .tag {
          position: absolute;
          top: 0;
          left: 0;
          background: #ece2c7;
          border-top-left-radius: 10rpx;
          width: 68rpx;
          height: 36rpx;
          line-height: 36rpx;
          font-size: 24rpx;
          color: #333333;
          text-align: center;
        }
      }

      .info {
        margin-left: 20rpx;
        width: 100%;

        ._title {
          color: #333333;

          .-name {
            font-size: 32rpx;
            font-weight: bold;
          }

          .-post {
            font-size: 24rpx;
            padding: 4rpx 12rpx;
            background: linear-gradient(90deg, #fdedc7 0%, #f7d9a2 100%);
            border-radius: 20rpx;
            white-space: nowrap;
          }

          .phone {
            flex-shrink: 0;
            width: 50rpx;
            height: 50rpx;
          }
        }

        ._company {
          font-size: 28rpx;
          color: #333333;
          margin-top: 8rpx;
        }

        ._post {
          font-size: 28rpx;
          color: #2878ff;
          margin-top: 8rpx;

          .-desc {
            margin-left: 24rpx;
          }
        }

        ._time {
          font-size: 24rpx;
          color: #aaabab;

          .-v {
            margin-left: 20rpx;
          }
        }

        ._endTime {
          width: 100%;
          display: flex;
          align-items: center;
          margin-top: 8rpx;

          .-tag {
            margin-left: 16rpx;
            padding: 4rpx 20rpx;
            text-align: center;
            font-size: 24rpx;
            color: #ffffff;
            background: #efa043;
            border-radius: 10rpx;
          }
        }
      }

      .refund {
        position: absolute;
        top: 88rpx;
        right: 0;
        width: 110rpx;
        height: 110rpx;
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: #333333;
      margin-top: 20rpx;

      image {
        width: 24rpx;
        height: 24rpx;
      }

      ._progress {
        display: flex;
        align-items: center;
      }

      ._set {
        width: 114rpx;
        height: 42rpx;
        line-height: 42rpx;
        border-radius: 10rpx;
        background: linear-gradient(90deg, #fdedc7 0%, #f7d9a2 100%);
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          margin-left: 8rpx;
        }
      }
    }
  }
</style>
